import React, {useEffect, useState} from 'react';
import {commonDataBrandSeries} from "../../api/request";
import {IndexBar, List, NavBar, Popup, Space, Toast,Image} from "antd-mobile";
import {DownOutline} from "antd-mobile-icons";

function Index({visible, onBackHandler, onSelectHandler}) {

    const [seriesVisible, setSeriesVisible] = useState(false)
    const [data, setData] = useState([])
    const [brand, setBrand] = useState({fctitems:[]})

    const getData = () => {

        const brandSeriesStr = localStorage.getItem("brandSeries");
        if (brandSeriesStr) {
            setData(JSON.parse(brandSeriesStr))
            return
        }
        commonDataBrandSeries().then(res => {
            if (200 === res.code) {
                setData(res.result)
                localStorage.setItem("brandSeries",JSON.stringify(res.result));
            } else {
                Toast.show({
                    content: res.message,
                })
            }
        })
    }
    const onClickBrand = (brand) => {
        setBrand(brand)
        setSeriesVisible(true);
    }


    useEffect(() => {
        getData()
    }, [])

    return (
        <div>
            <Popup
                visible={visible}
                bodyStyle={{height: '100vh'}}
            >
                <div style={{height: window.innerHeight}}>
                    <NavBar back='返回' onBack={onBackHandler}>
                        选择品牌
                    </NavBar>
                    <IndexBar>
                        {data.map(group => {
                            const {firstletter, branditems} = group
                            return (
                                <IndexBar.Panel
                                    index={firstletter}
                                    title={`${firstletter}`}
                                    key={`${firstletter}`}
                                >
                                    <List>
                                        {branditems.map((item, index) => (
                                            <List.Item arrowIcon={false} onClick={() => onClickBrand(item)} key={item.name}>

                                                <Space align={"center"}>
                                                     <Image src={`data:image/png;base64,${item.logoBase64}`} width={28} height={28} fit='c' />

                                                    {item.name}</Space>
                                            </List.Item>
                                        ))}
                                    </List>
                                </IndexBar.Panel>
                            )
                        })}
                    </IndexBar>
                </div>
            </Popup>


            <Popup
                visible={seriesVisible}
                onMaskClick={() => setSeriesVisible(false)}
                position='left'
                bodyStyle={{width: '90vw',height: window.innerHeight,overflow:'auto'}}
            >
                <NavBar back='返回' onBack={() => setSeriesVisible(false)}>
                    选择品牌
                </NavBar>
                <div className="mx-4 text-base">

                    {brand.fctitems.map(fac=>
                        <div className="  p-2" key={fac.id}>
                            <div className="text-sm text-stone-400 border-b border-gray-250 pb-2 flex justify-between">
                                <span> {fac.name}</span>
                                <DownOutline/>
                            </div>
                            {fac.seriesitems.map(ser =>
                                <div className="pl-4 mt-2" key={ser.id} onClick={()=> {
                                    setSeriesVisible(false);
                                    onSelectHandler(brand, fac, ser);
                                }}>
                                    <div className="py-2 border-b border-gray-150">{ser.name}</div>
                                </div>
                            )}

                        </div>
                    )}


                </div>
            </Popup>
        </div>
    );
}

export default Index;
